<route lang="yaml">
  meta:
    enabled: false
  </route>

<script setup lang="ts">
import type { FormInstance, FormRules } from 'element-plus'
import { reactive, ref } from 'vue'
import ShareCustomerForm from './form/shareCustomerForm.vue'

interface RowVO {
  id: number
  name: string
  phone: string
  wechat: string
  address: string
}

const searchform = reactive({
  name: '',
  phone: '',
})

const tableData = ref<RowVO[]>([
  { id: 10001, name: 'Test1', phone: '156****2255', wechat: '156****2255', address: '广东省广州市天河区棠下村棠下社区205', job: '销售' },
  { id: 10002, name: 'Test1', phone: '156****2255', wechat: '156****2255', address: '广东省广州市天河区棠下村棠下社区205', job: '销售' },
  { id: 10003, name: 'Test1', phone: '156****2255', wechat: '156****2255', address: '广东省广州市天河区棠下村棠下社区205', job: '销售' },
  { id: 10004, name: 'Test1', phone: '156****2255', wechat: '156****2255', address: '广东省广州市天河区棠下村棠下社区205', job: '财务' },
])

function search() {
  console.log('搜索')
}
function addHandle() {
  userFormModal.value = true
  console.log(6666)
}

function editHandle(row) {
  userFormTitle.value = '修改信息'
  console.log(row.id)
  userForm.value.id = row.id
  userForm.value.name = row.name
  userForm.value.phone = row.phone
  userForm.value.wechat = row.wechat
  console.log(userForm.value)
  userFormModal.value = true
}
function delHandle(id) {
  console.log(id)
}
function shareHandle(row) {
  console.log('分配客户')
  shareCustomerFormListRef.value.openShareCustomerForm(row, 'add')
}

// 表单部分
interface SysUserVO {
  id: number
  name: string
  phone: string
  wechat: string
  password: string
  address: string
}
const userFormModal = ref(false)
const userFormTitle = ref<string>('添加人员')
const userFormRef = ref<FormInstance>()
const userForm = ref({
  id: null,
  name: '',
  phone: '',
  wechat: '',
  password: '',
})

const phoneRegex = /^1[3-9]\d{9}$/
const passRegex = /^(?!\d+$)(?![a-z]+$)[0-9A-Z]{6,16}$/i

function validatePass(rule: any, value: any, callback: any) {
  if (userForm.value.id == null && value === '') {
    callback(new Error('请输入登录密码'))
  }
  else if (userForm.value.id == null && !passRegex.test(value)) {
    callback(new Error('密码至少包含一个字母和一个数字，并且总长度在6到16位之间‌'))
  }
  else {
    callback()
  }
}

function validatePhone(rule: any, value: any, callback: any) {
  if (value === '') {
    callback(new Error('请输入手机号'))
  }
  else if (!phoneRegex.test(value)) {
    callback(new Error('手机号格式不正确'))
  }
  else {
    callback()
  }
}

const rules = reactive<FormRules<RuleForm>>({
  name: [
    { required: true, message: '请输入姓名', trigger: 'blur' },
    { min: 2, max: 15, message: '字符数在2~15个字符', trigger: 'blur' },
  ],
  phone: [
    { required: true, message: '请输入手机号', trigger: 'blur' },
    { validator: validatePhone, trigger: 'blur' },
  ],
  password: [
    { validator: validatePass, trigger: 'blur' },
  ],
})
async function submitForm(formEl: FormInstance | undefined) {
  if (!formEl) { return }
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log('submit!')
    }
    else {
      console.log('error submit!', fields)
    }
  })
}

function resetForm(formEl: FormInstance | undefined) {
  if (!formEl) { return }
  userForm.value = {
    id: null,
    name: '',
    phone: '',
    wechat: '',
    password: '',
  }
}

function closeUserForm(formEl: FormInstance | undefined) {
  if (!formEl) { return }
  resetForm(formEl)
  userFormModal.value = false
}

const shareCustomerFormListRef = ref()
</script>

<template>
  <div>
    <FaPageMain>
      <el-form :model="searchform" label-width="auto" :inline="true" style="min-width: 600px">
        <el-form-item label="姓名" prop="name">
          <el-input v-model="searchform.name" />
        </el-form-item>
        <el-form-item label="手机号" prop="phone">
          <el-input v-model="searchform.phone" type="tel" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" style="background-color: #409EFF; border-color: #409EFF;" :icon="Search" @click="search">
            查询
          </el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="success" :icon="Plus" @click="addHandle">
            新增人员
          </el-button>
        </el-form-item>
      </el-form>
    </FaPageMain>
    <FaPageMain>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="id" label="ID" width="100" />
        <el-table-column prop="name" label="姓名" width="120" />
        <el-table-column prop="phone" label="手机号" width="120" />
        <el-table-column prop="wechat" label="微信号" width="120" />
        <el-table-column prop="job" label="岗位" width="120" />
        <el-table-column prop="address" label="地址" width="300" />
        <el-table-column prop="id" label="操作" width="300">
          <template #default="scope">
            <ElButton type="primary" circle @click="editHandle(scope.row)">
              <template #icon>
                <FaIcon name="i-ep:edit" />
              </template>
            </ElButton>
            <ElButton type="danger" circle @click="delHandle(scope.row.id)">
              <template #icon>
                <FaIcon name="i-ep:delete" />
              </template>
            </ElButton>
            <ElButton type="info" circle @click="shareHandle(scope.row)">
              <template #icon>
                <FaIcon name="i-ep:user" />
              </template>
            </ElButton>
          </template>
        </el-table-column>
      </el-table>
    </FaPageMain>
    <div>
      <FaModal v-model="userFormModal" :title="userFormTitle" :align-center="true" @close="closeUserForm(userFormRef)">
        <div class="flex-start-center flex-wrap gap-2">
          <el-form ref="userFormRef" :model="userForm" :rules="rules" label-width="auto" style="width: 100%">
            <el-form-item label="姓名" prop="name">
              <el-input v-model="userForm.name" />
            </el-form-item>
            <el-form-item label="手机号" prop="phone">
              <el-input v-model="userForm.phone" type="tel" />
            </el-form-item>
            <el-form-item label="微信号" prop="wechat">
              <el-input v-model="userForm.wechat" />
            </el-form-item>
            <el-form-item v-if="userForm.id == null || userForm.id == ''" label="登录密码" prop="password">
              <el-input v-model="userForm.password" type="password" />
            </el-form-item>
          </el-form>
        </div>
        <template #footer>
          <el-button @click="resetForm(userFormRef)">
            重置
          </el-button>
          <el-button type="primary" @click="submitForm(userFormRef)">
            提交
          </el-button>
        </template>
      </FaModal>
    </div>
    <ShareCustomerForm ref="shareCustomerFormListRef" />
  </div>
</template>
